import 'package:flutter/material.dart';
import 'package:flutter_vant_ui/flutter_vant_ui.dart';

import '../../demos/demos.dart';

class VanDocDemoRadioSection extends StatelessWidget {
  const VanDocDemoRadioSection({super.key});

  @override
  Widget build(BuildContext context) {
    String checkedValue = "1";

    return Scaffold(
      appBar: AppBar(title: const Text("Radio")),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16).copyWith(bottom: 40),
          child: Column(
            children: <Widget>[
              // VanRadio(value: "1", label: "单选框 1"),
              const VanDocDemoBlockTitle(title: "基础用法", paddingTop: 20, paddingLeft: 0),
              VanRadioGroup(value: checkedValue, children: const [
                VanRadio(value: "1", child: "单选框 1"),
                VanRadio(value: "2", child: "单选框 2"),
              ]),
              //
              const VanDocDemoBlockTitle(title: "水平排列", paddingTop: 20, paddingLeft: 0),
              VanRadioGroup(value: checkedValue, direction: VanRadioDirection.horizontal, children: const [
                VanRadio(value: "1", child: "单选框 1"),
                VanRadio(value: "2", child: "单选框 2"),
              ]),
              //
              const VanDocDemoBlockTitle(title: "禁用状态", paddingTop: 20, paddingLeft: 0),
              VanRadioGroup(value: checkedValue, disabled: true, children: const [
                VanRadio(value: "1", child: "单选框 1"),
                VanRadio(value: "2", child: "单选框 2"),
              ]),
              //
              const VanDocDemoBlockTitle(title: "自定义形状", paddingTop: 20, paddingLeft: 0),
              VanRadioGroup(value: checkedValue, shape: VanRadioShape.square, children: const [
                VanRadio(value: "1", child: "单选框 1"),
                VanRadio(value: "2", child: "单选框 2"),
              ]),
              const SizedBox(height: 20),
              VanRadioGroup(value: checkedValue, shape: VanRadioShape.dot, children: const [
                VanRadio(value: "1", child: "单选框 1"),
                VanRadio(value: "2", child: "单选框 2"),
              ]),
              //
              const VanDocDemoBlockTitle(title: "自定义颜色", paddingTop: 20, paddingLeft: 0),
              VanRadioGroup(value: checkedValue, shape: VanRadioShape.square, children: const [
                VanRadio(value: "1", child: "单选框 1", checkedColor: Color(0xffee0a24)),
                VanRadio(value: "2", child: "单选框 2", checkedColor: Color(0xffee0a24)),
              ]),
              //
              const VanDocDemoBlockTitle(title: "自定义大小", paddingTop: 20, paddingLeft: 0),
              VanRadioGroup(value: checkedValue, shape: VanRadioShape.dot, children: const [
                VanRadio(value: "1", child: "单选框 1", iconSize: 24),
                VanRadio(value: "2", child: "单选框 2", iconSize: 24),
              ]),
              //
              const VanDocDemoBlockTitle(title: "自定义图标", paddingTop: 20, paddingLeft: 0),
              Builder(builder: (context) {
                builder(scope) {
                  return Icon(scope.checked ? Icons.verified_user : Icons.verified_user_outlined);
                }

                return VanRadioGroup(value: checkedValue, shape: VanRadioShape.dot, children: [
                  VanRadio(value: "1", child: "单选框 1", icon: builder),
                  VanRadio(value: "2", child: "单选框 2", icon: builder),
                ]);
              }),
              //
              const VanDocDemoBlockTitle(title: "左侧文本", paddingTop: 20, paddingLeft: 0),
              VanRadioGroup(value: checkedValue, children: const [
                VanRadio(value: "1", child: "单选框 1", labelPosition: VanRadioPosition.left),
                VanRadio(value: "2", child: "单选框 2", labelPosition: VanRadioPosition.left),
              ]),
              //
              const VanDocDemoBlockTitle(title: "禁用文本点击", paddingTop: 20, paddingLeft: 0),
              VanRadioGroup(value: checkedValue, children: const [
                VanRadio(value: "1", child: "单选框 1", labelDisabled: true),
                VanRadio(value: "2", child: "单选框 2", labelDisabled: true),
              ]),

              //
              const VanDocDemoBlockTitle(title: "搭配单元格组件使用", paddingTop: 20, paddingLeft: 0),
              Builder(builder: (context) {
                final controller = VanRadioGroupController("1");
                return VanRadioGroup(
                  controller: controller,
                  child: VanCellGroup(
                    inset: true,
                    style: const VanCellGroupStyle(padding: EdgeInsets.symmetric(horizontal: 0)),
                    children: [
                      VanCell(
                        title: "单选框 1",
                        clickable: true,
                        onClick: () => controller.value = "1",
                        value: const VanRadio(value: "1"),
                      ),
                      VanCell(
                        title: "单选框 1",
                        clickable: true,
                        onClick: () => controller.value = "2",
                        value: const VanRadio(value: "2"),
                      ),
                    ],
                  ),
                );
              }),
            ],
          ),
        ),
      ),
    );
  }
}
